Vistas (HTML)

Si quieres modificar el HTML de alguna página puedes hacerlo copiando el HTML de app/views y poniendolo en app/views/custom respetando los subdirectorios que encuentres ahí. Por ejemplo si quieres modificar app/views/pages/conditions.html debes copiarlo y modificarla en app/views/custom/pages/conditions.html.erb

Estilos CSS con SASS

Si quieres cambiar algun selector CSS (de las hojas de estilo) puedes hacerlo en el fichero app/assets/stylesheets/custom.scss. Por ejemplo si quieres cambiar el color del header (.top-links) puedes hacerlo agregando:

.top-links {
  background: red;
}

Si quieres cambiar alguna variable de foundation puedes hacerlo en el fichero app/assets/stylesheets/_custom_settings.scss. Por ejemplo para cambiar el color general de la aplicación puedes hacerlo agregando:

$brand:             #446336;

Usamos un preprocesador de CSS, SASS, con la sintaxis SCSS.

Además puedes comprobar la sintaxis de tus ficheros scss con:

scss-lint

Accesibilidad

Para mantener el nivel de accesibilidad, si añades colores nuevos utiliza un Comprobador de contraste de color (WCAG AA es obligatorio, WCAG AAA es recomendable)

results matching ""

    No results matching ""